import React from "react";
import customTreeSelectField from "components/customTreeSelectField";
import { connect, mapStyledProps } from "@formily/antd";

const CustomTreeSelectPreview = props => {
  const { value, className } = props;
  if (value) {
    let res;
    if (Array.isArray(value)) {
      res = value.map(({ label, value: labelValue }, index) => (
        <span key={labelValue}>
          {label}
          {index < value.length - 1 ? ", " : ""}
        </span>
      ));
    } else {
      res = <span key="single">{value?.label || ""}</span>;
    }
    return <p className={`preview-text ${className || ""}`}>{res}</p>;
  }
  return "";
};
const CustomMapTextComponent = (Target, _, fieldProps) => {
  const { editable } = fieldProps;
  if (editable !== undefined) {
    if (editable === false) {
      return CustomTreeSelectPreview;
    }
  }
  return Target;
};

const CustomTreeSelectFieldSingle = connect({
  getProps: (componentsProps, fieldProps) => {
    mapStyledProps(componentsProps, fieldProps);
    const { editable } = fieldProps;
    // const { "x-component-porps" = {} } = props
    if (!componentsProps.itemProps) {
      // x-components-props中未设置itemProps
      componentsProps.itemProps = {};
    }
    if (
      componentsProps.itemProps.disabled === undefined &&
      editable !== undefined
    ) {
      componentsProps.itemProps.disabled = !editable;
    }
    componentsProps.multiple = componentsProps.params.params.multiple;
  },
  getComponent: CustomMapTextComponent,
})(customTreeSelectField);

// const CustomTreeSelectFieldMultiple = connect({
//   getProps: (componentsProps, fieldProps) => {
//     mapStyledProps(componentsProps, fieldProps);
//     const { editable } = fieldProps;
//     if (!componentsProps.itemProps){ // x-components-props中未设置itemProps
//       componentsProps.itemProps = {};
//     }
//     if (componentsProps.itemProps.disabled === undefined) {
//       componentsProps.itemProps.disabled = !editable;
//     }
//     componentsProps.multiple = true;
//   },
//   getComponent: CustomMapTextComponent,
// })(customTreeSelectField );

export {
  CustomTreeSelectFieldSingle,
  // CustomTreeSelectFieldMultiple,
};
